<template>
    <div class="home-wrap">
        <div>
            <news-nav :tabs="tabs" :channelId="channelId" @changeTab="changeTab"></news-nav>
        </div>
        <div class="nv-box">
            <banner-swiper
                :list="bannerList"
                @jumpBannerPage="jumpBannerPage"
                :isHome="true"
                centeredSlides
            ></banner-swiper>

            <horn-swiper :list="hornList"></horn-swiper>

            <infinite-scroll :key="'infinite.scroll' + channelId" @loadMore="loadMore" :immediate-check="true">
                <div v-for="(newItem, index) in newsList" :key="index">
                    <div class="news-item">
                        <div>{{ newItem.title }}</div>
                        <img :src="newItem.newsImg" v-err-src alt="" />
                    </div>
                </div>
            </infinite-scroll>
        </div>

        <bottom-menu></bottom-menu>
    </div>
</template>

<script>
import BottomMenu from 'components/bottom-menu/bottom-menu';
import BannerSwiper from 'components/banner-swiper/banner-swiper';
import HornSwiper from 'components/horn-swiper/horn-swiper';
import InfiniteScroll from 'components/infinite-scroll/infinite-scroll';
import NewsNav from './components/news-nav/news-nav';
import { exampleApi, homeApi } from 'api';
export default {
    name: 'DuoduocaiH5Home',
    components: { BottomMenu, NewsNav, BannerSwiper, HornSwiper, InfiniteScroll },
    data() {
        return {
            channelId: 0,
            tabs: [
                {
                    channelId: 0,
                    channelName: '推荐',
                },
                {
                    channelId: 1,
                    channelName: '双色球',
                },
                {
                    channelId: 2,
                    channelName: '大乐透',
                },
                {
                    channelId: 3,
                    channelName: '福彩3D',
                },
                {
                    channelId: 4,
                    channelName: '快乐8',
                },
                {
                    channelId: 5,
                    channelName: '排列3',
                },
                {
                    channelId: 6,
                    channelName: '排列5',
                },
                {
                    channelId: 7,
                    channelName: '七星彩',
                },
                {
                    channelId: 8,
                    channelName: '七乐彩',
                },
            ],
            bannerList: [
                {
                    imgUrl: 'https://f.jiangduoduo.com/2022/10/11/282842984DCE44EAC7369ACD151DA807.png',
                },
                {
                    imgUrl: 'https://f.jiangduoduo.com/2022/10/11/282842984DCE44EAC7369ACD151DA807.png',
                },
                {
                    imgUrl: 'https://f.jiangduoduo.com/2022/10/11/282842984DCE44EAC7369ACD151DA807.png',
                },
            ],
            hornList: [],
            newsList: [],
        };
    },

    mounted() {
        exampleApi.list();
        // this.fetchHomeData();
    },
    watch: {
        channelId(value) {
            this.newsList = [];
        },
    },
    methods: {
        fetchHomeData(cb) {
            homeApi.list().then((res) => {
                if (res.code == 0) {
                    this.hornList = res.data.hornList;
                    this.newsList = this.newsList.concat(res.data.newsList);
                    if (this.newsList.length >= 30) {
                        cb(false);
                    } else {
                        cb(true);
                    }
                }
            });
        },
        changeTab(tab) {
            console.log('🚀 ~ file: home.vue ~ line 117 ~ changeTab ~ tab', tab);
            this.channelId = tab;
            console.log(tab);
        },
        jumpBannerPage() {},
        loadMore(cb) {
            console.log('loadMoreloadMore');
            this.fetchHomeData(cb);
        },
    },
};
</script>

<style lang="scss" scoped>
.home-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;

    .nv-box {
        width: 100%;
        flex: 1;
        overflow-y: auto;
        .news-item {
            text-align: center;
            img {
                width: 100%;
            }
        }
    }
}
</style>
